@charset "UTF-8";
/* CSS Document */
.green{
	color:#090;
	}
.change{
	line-height:60px;
	font-size:18px;
	}
.font-28{
	font-size:28px;
	}
.tanjia-sheet-l{
	border-bottom:1px solid #f0f0f0;
	padding-top:10px;
	padding-bottom:10px;
	font-size:14px;
	}
.tanjia-sheet{
	padding-left:0px;
	padding-right:0px;
	}
	
.not-permission{
	text-align:center;
	margin-top:10px
	
}
.data_tabnav,.data-nav{
	height: 40px;
}
.data-ul{
	height: 40px;
	list-style:none;
	line-height:40px;
	    margin-left: -10px;
}
.data-ul li{
	float:left;
	padding:0 15px;
}
.data-ul li:nth-child(1){
	padding-left:0;
}
.data-ul li a{
	color:#888;
}
.data-nav{
	background: #000;
	opacity: 0.5;
}

  	.banner-pc{
  		position: relative;
  		overflow: hidden;/*--相框作用，只显示一个图片---*/
		border-radius:5px;
		width: 640px;
			height:300px;
  	}
		#dis {/*--绝对定位方便li图片简介的自动分布定位---*/
			position: absolute;
			left: -50px;
			top: -10px;
			opacity: 0.5;
		}
		#dis li {
			display: inline-block;
			width: 200px;
			height: 20px;
			margin: 0 50px;
			float: left;
			text-align: center;
			color: #fff;
			border-radius: 10px;
			background: #000;
		}
		#photos img {
			float: left;
			width:640px;
			height:300px;
		}
		#photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/
			position: absolute;z-index:9;
			width: calc(640px * 4);/*---修改图片数量的话需要修改下面的动画参数*/
		}
		.play{
			animation: ma 20s ease-out infinite alternate;/**/
		}
		@keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
			0%,20% {		margin-left: 0px;		}
			25%,40% {		margin-left: -640px;	}
			45%,60% {		margin-left: -1280px;	}
			65%,100% {		margin-left: -1920px;	}
		}
		.num{
			border-radius:100%;
			background:#fff;
			width:10px;height:10px;
			cursor:pointer;
			color:#fff;
			text-align:center;
			opacity:0.8;
			display:inline-block;
			position:absolute;z-index:10;
			left: 302px;
			bottom: 45px;
		}
		.num:hover{background:#f00;}
		.num:hover,#photos:hover{animation-play-state:paused;}
		.num:nth-child(2){margin-left:15px}
		.num:nth-child(3){margin-left:30px}
		.num:nth-child(4){margin-left:45px}
		#a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}
		#a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}
		#a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}
		#a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}
		@keyframes ma1 {0%{margin-left:-1920px;}100%{margin-left:-0px;}	}
		@keyframes ma2 {0%{margin-left:-0;}100%{margin-left:-640px;}	}
		@keyframes ma3 {100%{margin-left:-1280px;}	}
		@keyframes ma4 {100%{margin-left:-1920px;}	}
	.play  div{
			width: 640px;
			height:300px;
			float: left;
		
	}
		.play  div p{
			position: absolute;
			width: 640px;
			height: 40px;
			line-height: 40px;
			bottom: -16px;
			z-index: 99;
			text-align: center;
			background: #000000;
			opacity: .8;
			color: #fff;
			
		}
		.point{
			width: 640px;
			height: 30px;
		}